<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo" />
<ng-template #headerContent>
  <div nz-row>
    <div nz-col nzFlex="1">
      <div>段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。</div>
      <div class="content-link">
        <a>
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />
          快速开始
        </a>
        <a>
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />
          产品简介
        </a>
        <a>
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />
          产品文档
        </a>
      </div>
    </div>
    @if ((isOverMode$ | async) === false) {
      <div nz-col nzFlex="230px">
        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" style="width: 155px; margin-top: -20px" />
      </div>
    }
  </div>
</ng-template>
<div class="normal-table-wrap m-t-0">
  <div nz-row [nzGutter]="16">
    <div class="flex" nz-col [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXl]="8" [nzXs]="24" [nzXXl]="6">
      <app-water-mark />
      <nz-card class="m-t-20 flex-1" [nzBodyStyle]="{ padding: 0, height: '100%', display: 'flex', justifyContent: 'center', minHeight: '160px' }">
        <div class="center new-btn">
          <i class="m-r-8" nz-icon nzTheme="outline" nzType="plus"></i>
          <span>新增产品</span>
        </div>
      </nz-card>
    </div>
    @for (item of list; track item) {
      <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXl]="8" [nzXs]="24" [nzXXl]="6">
        <app-water-mark />
        <nz-card class="m-t-20" nzHoverable [nzActions]="[actionSetting, actionEdit]">
          <nz-card-meta [nzAvatar]="avatarTemplate" [nzDescription]="item.desc" [nzTitle]="item.name"></nz-card-meta>
        </nz-card>
        <ng-template #avatarTemplate>
          <nz-avatar [nzSrc]="item.avatar"></nz-avatar>
        </ng-template>
        <ng-template #actionSetting>操作一</ng-template>
        <ng-template #actionEdit>操作二</ng-template>
      </div>
    }
  </div>
</div>
